<template>
  <div class="recruitment-container">
    <el-card>
      <div class="header">
        <h2>人才招聘管理</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" @click="showAddPositionDialog">发布新职位</el-button>
          <el-button icon="el-icon-download" @click="exportRecruitmentData">导出数据</el-button>
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeStatus" class="recruitment-tabs">
      <el-tab-pane label="待面试" name="pending">
        <recruitment-list :data="pendingList" status="pending" @action="handleAction" />
      </el-tab-pane>

      <el-tab-pane label="已录用" name="employed">
        <recruitment-list :data="employedList" status="employed" @action="handleAction" />
      </el-tab-pane>

      <el-tab-pane label="已入职" name="onboarded">
        <recruitment-list :data="onboardedList" status="onboarded" @action="handleAction" />
      </el-tab-pane>

      <el-tab-pane label="已淘汰" name="rejected">
        <recruitment-list :data="rejectedList" status="rejected" @action="handleAction" />
      </el-tab-pane>
    </el-tabs>

    <!-- 发布新职位对话框 -->
    <el-dialog v-model="positionDialogVisible" title="发布新职位" width="50%">
      <el-form :model="positionForm" label-width="100px">
        <el-form-item label="职位名称" required>
          <el-input v-model="positionForm.title" placeholder="请输入职位名称" />
        </el-form-item>
        <el-form-item label="所属部门" required>
          <el-cascader
              v-model="positionForm.department"
              :options="departmentOptions"
              :props="{ checkStrictly: true, value: 'id', label: 'label' }"
              placeholder="选择所属部门"
          />
        </el-form-item>
        <el-form-item label="工作地点">
          <el-input v-model="positionForm.location" placeholder="请输入工作地点" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招聘人数" required>
              <el-input-number v-model="positionForm.openings" :min="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="薪资范围">
              <el-input v-model="positionForm.salary" placeholder="例如：15k-25k" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="职位描述">
          <el-input v-model="positionForm.description" type="textarea" :rows="4" placeholder="请输入职位描述" />
        </el-form-item>
        <el-form-item label="职位要求">
          <el-input v-model="positionForm.requirements" type="textarea" :rows="4" placeholder="请输入职位要求" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="positionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="publishPosition">发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import RecruitmentList from '../components/recruitment/RecruitmentList.vue'

export default {
  name: 'Recruitment',
  components: {
    RecruitmentList
  },
  setup() {
    const activeStatus = ref('pending')
    const positionDialogVisible = ref(false)

    const pendingList = ref([
      {
        id: 1001,
        name: '张三',
        position: '前端开发工程师',
        experience: '3年',
        education: '本科',
        applyDate: '2023-05-10',
        resume: true,
        status: 'pending'
      },
      {
        id: 1002,
        name: '李四',
        position: 'UI设计师',
        experience: '5年',
        education: '本科',
        applyDate: '2023-05-12',
        resume: true,
        status: 'pending'
      },
      { id: 1003,
        name: '钱多多',
        position: '测试工程师',
        experience: 2,
        education: '大专',
        applyDate: '2023-05-15',
        resume: true,
        status: 'pending'
      },
      {
        id: 1004,
        name: '孙小美',
        position: '产品助理',
        experience: 1,
        education: '本科',
        applyDate: '2023-05-16',
        resume: true,
        status: 'pending'
      },
      {
        id: 1005,
        name: '周星星',
        position: 'Java开发',
        experience: 4,
        education: '本科',
        applyDate: '2023-05-17',
        resume: true,
        status: 'pending'
      }
    ])

    const employedList = ref([
      {
        id: 2001,
        name: '王五',
        position: '后端开发工程师',
        experience: '4年',
        education: '硕士',
        applyDate: '2023-04-20',
        offerDate: '2023-05-05',
        status: 'employed'
      },
      {
        id: 2002,
        name: '吴小凡',
        position: 'UI设计师',
        experience: 3,
        education: '本科',
        applyDate: '2023-04-25',
        offerDate: '2023-05-10',
        status: 'employed'
      }
    ])

    const onboardedList = ref([
      {
        id: 3001,
        name: '赵六',
        position: '产品经理',
        experience: '6年',
        education: '本科',
        applyDate: '2023-03-15',
        offerDate: '2023-04-01',
        onboardDate: '2023-04-15',
        status: 'onboarded'
      },
      {
        id: 3002,
        name: '郑成功',
        position: '项目经理',
        experience: 7,
        education: '硕士',
        applyDate: '2023-02-10',
        offerDate: '2023-03-01',
        onboardDate: '2023-03-20',
        status: 'onboarded'
      }
    ])

    const rejectedList = ref([
      {
        id: 4001,
        name: '钱七',
        position: '测试工程师',
        experience: '2年',
        education: '大专',
        applyDate: '2023-05-08',
        rejectDate: '2023-05-15',
        status: 'rejected'
      },
      { id: 4002,
        name: '王小明',
        position: '运维工程师',
        experience: 2,
        education: '大专',
        applyDate: '2023-05-10',
        rejectDate: '2023-05-18',
        status: 'rejected'
      }
    ])

    const positionForm = reactive({
      title: '',
      department: [],
      location: '上海',
      openings: 1,
      salary: '15k-25k',
      description: '',
      requirements: ''
    })

    const departmentOptions = ref([
      { id: 1, label: '总公司', children: [
          { id: 2, label: '技术部', children: [
              { id: 5, label: '前端组' },
              { id: 6, label: '后端组' }
            ]},
          { id: 3, label: '市场部' },
          { id: 4, label: '人力资源部' }
        ]}
    ])

    const showAddPositionDialog = () => {
      positionDialogVisible.value = true
    }

    const publishPosition = () => {
      ElMessage.success('职位发布成功')
      positionDialogVisible.value = false
      // 重置表单
      Object.assign(positionForm, {
        title: '',
        department: [],
        location: '上海',
        openings: 1,
        salary: '15k-25k',
        description: '',
        requirements: ''
      })
    }

    const exportRecruitmentData = () => {
      ElMessage.success('招聘数据导出成功')
    }

    const handleAction = (action, candidate) => {
      switch (action) {
        case 'employ':
          // 从待面试列表移除
          pendingList.value = pendingList.value.filter(item => item.id !== candidate.id)
          // 添加到已录用列表
          employedList.value.push({
            ...candidate,
            status: 'employed',
            offerDate: new Date().toISOString().split('T')[0]
          })
          ElMessage.success(`已录用: ${candidate.name}`)
          break

        case 'reject':
          // 从待面试列表移除
          pendingList.value = pendingList.value.filter(item => item.id !== candidate.id)
          // 添加到已淘汰列表
          rejectedList.value.push({
            ...candidate,
            status: 'rejected',
            rejectDate: new Date().toISOString().split('T')[0]
          })
          ElMessage.success(`已淘汰: ${candidate.name}`)
          break

        case 'onboard':
          // 从已录用列表移除
          employedList.value = employedList.value.filter(item => item.id !== candidate.id)
          // 添加到已入职列表
          onboardedList.value.push({
            ...candidate,
            status: 'onboarded',
            onboardDate: new Date().toISOString().split('T')[0]
          })
          ElMessage.success(`已确认入职: ${candidate.name}`)
          break

        case 'reinterview':
          // 从已淘汰列表移除
          rejectedList.value = rejectedList.value.filter(item => item.id !== candidate.id)
          // 添加到待面试列表
          pendingList.value.push({
            ...candidate,
            status: 'pending'
          })
          ElMessage.success(`已重新面试: ${candidate.name}`)
          break

        case 'download':
          ElMessage.success(`下载简历: ${candidate.name}`)
          break

        case 'view':
          ElMessage.info(`查看详情: ${candidate.name}`)
          break
      }
    }

    return {
      activeStatus,
      pendingList,
      employedList,
      onboardedList,
      rejectedList,
      positionDialogVisible,
      positionForm,
      departmentOptions,
      showAddPositionDialog,
      publishPosition,
      exportRecruitmentData,
      handleAction
    }
  }
}
</script>

<style scoped>
.recruitment-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recruitment-tabs {
  margin-top: 20px;
}
</style>